<template>
  <div class="detail_wapper">
    <div v-if="showOtherMode">
      <div class="cp_desc">
        <div>
          <div class="close_and_up">
            <span class="close_and_up_jtzz" v-if="isJTZZ">股池详情</span>
            <div style="width: 45%; display: flex; justify-content: space-between" v-else>
              <span class="close_and_up_span">股池详情</span>
            </div>
          </div>
          <div :class="{ cp_desc_content: isClose }" class="cp_desc_content_open" v-html="staticData.cpDescribe">
          </div>
        </div>
      </div>
      <!-- 股票池 -->
      <div class="cp_chi_cang">
        <div class="tp_chi_cang_history">
          <div>
            <div class="industry_layout_tips">股票池</div>
          </div>
        </div>
        <!-- 日历组件 -->
        <div class="calendar_prop" @click="showCalendar" v-if="dateList.length">
          <hxm-calendar :dateArr="dateList" @confirm="selectDate"> </hxm-calendar>
        </div>
        <div v-if="stockList.length">
          <ActiveCP :myList="stockList" />
          <div class="to_history" v-if="$route.query.gpc_id !== '186'">
            <div @click="toHistoryPage">
              <span>持仓记录</span>
              <span class="history_success_image"></span>
            </div>
          </div>
        </div>
        <div v-else>
          <NoData :textTip="emptyText" />
        </div>
      </div>
      <!-- 备选池 -->
      <div class="table_wrapper">
        <div class="industry_layout_tips">备选池</div>
        <div
          :class="detailTableData.length > 6 ? 'table_scroll_wrapper' : 'table_scroll_wrapper_auto'"
        >
          <TableProp :detailTableData="detailTableData" />
        </div>
      </div>
      <!-- 持仓分析行业布局组件 -->
      <InsustryLayout :pieOptionData="pieOptionData" />
      <!-- 如果没有订阅方式，弹出订阅方式弹窗 -->
      <div>
        <Subscribe :isShow="isShow" @changeStatus="isShowChange"> </Subscribe>
      </div>
    </div>
    <div v-else>
      <OthersTemplate />
    </div>
    <!-- 客服组件 -->
    <div>
      <CustomerService></CustomerService>
    </div>
  </div>
</template>
<script>
import CustomerService from '../components/common/CustomerService';
import Subscribe from '../components/common/Subscribe';
import SubscribeTemplate from '../components/common/SubscribeTemplate';
import ActiveCP from '../components/ActiveCP';
import NoData from '../components/common/NoData';
import TableProp from '../components/common/TableProp';
import InsustryLayout from '../components/InsustryLayout';
import StaticDataProp from '../components/StaticDataProp';
import OthersTemplate from '../components//OthersTemplate';
import {
  timestampToTime,
  redgreenhandler,
  jumpTokline,
  compare,
  webHQCommon,
  apiDataDeal,
  dealStaticData,
  spliceData,
} from '../utils/index';
import configDataOptions from '../utils/dataOption';
import config from '../config/index';
import {
  SUB_REM,
  GET_STOCKS_PROFIT,
  SELECT_STOCKS,
  GET_PICK_DATES,
  GET_STOCKS_TRACE,
  GET_SUB,
  GET_EMPTY_TEXT,
} from '@/apis';
  const ggzcId=2;
  const jgccId=10;
  const ybyxId=118;
  const bmltId=108;
  const xfltId=78;
  const newXfltId=178;
  const newRdldId=186;
  const dtqsId=202;
  const xfjjId=218;
  const bdqzId=220;
  const rdjjId=222;
  const ncId=212;
export default {
  name: 'detail',
  data() {
    return {
      curId: 0,
      dataTipArr: ['近3月', '近1年', '创建以来'],
      isClose: false,
      list: [],
      defaultProfit: [], //本组合数据
      szzsProfit: [], //沪深300
      optionData: [],
      detailTableData: [],
      tempArr: [],
      threeMonthArr: [],
      yearArr: [],
      pieOptionData: [],
      pieOptionDataColor:
        window.getCssStyle() === 'black'
          ? ['#A42222 ', '#3265A6', '#B25913', '#3D3D95', '#B17216', '#9D1D42', '#5B91FC']
          : ['#F16F6F', '#7FB2F3', '#FFA660', '#8A8AE2', '#FEBF62', '#EA698F', '#5B91FC'], //UI稿取前6个
      staticData: [],
      query: {},
      getDataTemp: [],
      isShow: false, //一期股池订阅方式组件
      stockList: [], // 股票池
      dateList: [], //获取到的选股日期列表
      globalPushType: '',
      stockIdArr: [], //存个股id
      marketIdArr: [], //存个股marketid
      stocksId: [], //股池id
      stocksMarketId: [],
      isCalendar: false,
      calendarSelect: {
        type: Date,
        default: '',
      },
      isBlack: window.getCssStyle() === 'black',
      reloadDataLock: false,
      detailStockListTemp: [],
      lastStockList1: [],
      lastStockList2: [],
      showOtherMode: true,
      stockPool: [ggzcId, xfltId, jgccId, ybyxId, bmltId, newRdldId, newXfltId, dtqsId,xfjjId,bdqzId,rdjjId,ncId],
      isJTZZ: getParam('product') === 'jtzz',
      emptyText: '',
    };
  },
  components: {
    CustomerService,
    ActiveCP,
    NoData,
    Subscribe,
    SubscribeTemplate,
    InsustryLayout,
    StaticDataProp,
    TableProp,
    OthersTemplate,
  },
  watch: {
    optionData: {
      handler(newValue, oldValue) {
        if (newValue) {
          configDataOptions.lineOption.data[0].originData = newValue;
        }
      },
      deep: true,
    },
    detailStockListTemp: {
      handler(newValue) {
        this.detailTableData = [];
        this.stockList = [];
        newValue.forEach((item, index) => {
          if (item.isStocks === 1) {
            this.detailTableData.push(item);
          } else {
            this.stockList.push(item);
          }
        });
      },
      deep: true,
    },
    calendarSelect: {
      handler(newValue) {
        if (newValue) {
          const query = {};
          query.status = this.query.status; //1：备选 2：买入 3：持仓 4：卖出 5：止盈 6：止损 7：买入失败 8：待买入
          query.gpcId = this.query.gpcId;
          query.date = newValue;
          query.version = getParam('product') === 'jtzz' ? 2 : 1; //version=2时，股票池接口才会有subscribe
          this.getStockList(query);
        }
      },
      deep: true,
    },
  },
  created() {
    if (!this.stockPool.includes(Number(this.$route.query.gpc_id))) {
      this.showOtherMode = false;
      return;
    }
    this.query.gpcId = this.$route.query.gpc_id;
    this.query.status = '2,3,4,5,6,7,8,9,10,11'; //1：备选 2：买入 3：持仓 4：卖出 5：止盈 6：止损 7：买入失败 8：待买入 9：取消买入 10：增仓 11：减仓
    this.getDates();
    // 获取所有订阅的股池和股票列表
    if (this.isJTZZ) {
      this.getAllStocks();
      registerWebListener('onShow', () => {
        this.getAllStocks();
      });
    }
    this.getEmptyText();
  },
  mounted() {
    $(window).scrollTop(0);
    if (!this.stockPool.includes(Number(this.$route.query.gpc_id))) {
      this.showOtherMode = false;
      return;
    }
    // 获取收益数据
    this.getDealProfitData();
    // 备选池
    this.getSocksData();
    this.$pageStatus.loading();
  },
  methods: {
    showCalendar() {
      this.isCalendar = !this.isCalendar;
    },
    selectDate(arg) {
      if (arg) {
        this.calendarSelect = arg;
      }
    },
    // 获取所有订阅的股池和股票列表
    async getAllStocks() {
      const params = {};
      params.type = 3;
      params.version = getParam('product') === 'jtzz' ? 2 : 1;
      params.data = true;
      const res = await GET_SUB(params);
      if (Number(res.code) === 0 && res.data) {
        res.data.forEach((item, index) => {
          this.globalPushType = item.push_type.join(',');
        });
      }
    },
    // 获取日期
    async getDates() {
      const query = {};
      query.gpcId = this.query.gpcId;
      query.status = this.query.status;
      try {
        const res = await GET_PICK_DATES(query);
        // 日期为空不展示日历
        const resData = res.data;
        if (Number(res.code) === 0 && Array.isArray(resData) && resData.length) {
          this.dateList = resData;
          this.dateList.reverse();
          // 股票池
          const query = {};
          query.status = this.query.status; //1：备选 2：买入 3：持仓 4：卖出 5：止盈 6：止损 7：买入失败 8：待买入
          query.gpcId = this.query.gpcId;
          query.date = this.dateList[this.dateList.length - 1];
          query.version = getParam('product') === 'jtzz' ? 2 : 1; //version=2时，股票池接口才会有subscribe
          this.getStockList(query);
        } else {
          this.dateList = [];
          this.$pageStatus.close();
        }
      } catch (error) {
        _t.errorReport({name:`Details.vue里getDates方法错误。${error.name}`,message:`接口url：${_Global.api.pickDates}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 股票池个股订阅信息
    async getStockTrace(query, arr) {
      const params = {};
      params.gpcId = query.gpcId;
      params.stockCode = query.stockCode;
      params.stockId = query.stockId;
      try {
        const res = await GET_STOCKS_TRACE(params);
        if (Number(res.code) === 0 && res.data) {
          let tempStocks = [];
          tempStocks.push(arr);
          // 组装跟踪说明
          res.data.forEach((item, index) => {
            if (item.longMsg && !item.shortMsg) {
              item.shortMsg = item.longMsg;
              item.longMsg = '';
            }
            // 日期+短信说明
            item.shortMsg = item.shortMsg ? item.basicDate.split(' ')[0] + ' ' + item.shortMsg : '';
          });
          //获取到的提醒列表 （反转一下）
          tempStocks[0]['subscribeList'] = res.data.reverse();
          return tempStocks[0];
        }
      } catch (error) {
        _t.errorReport({name:`Details.vue组件中方法getStockTrace错误。${error.name}`,message:`接口url：${_Global.api.stockTrace}，参数：${JSON.stringify(params)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 切换曲线图
    setSelect(index) {
      this.curId = index;
      this.optionData = [];
      if (index === 0) {
        //近3个月的数据处理
        this.optionData = this.threeMonthArr;
      } else if (index === 1) {
        // 近1年
        this.optionData = this.yearArr;
      } else {
        //创建以来
        this.optionData = this.tempArr;
      }
    },
    //到历史页
    toHistoryPage() {
      location.href = `${config.toNewPage}history?gpc_id=${this.query.gpcId}&product=${getParam(
        'product'
      )}`;
    },
    // 展开或关闭开关
    colseSwitch() {
      this.isClose = !this.isClose;
    },
    // 获取收益数据并处理
    async getDealProfitData() {
      const query = {};
      query.gpcId = this.query.gpcId;
      try {
        const res = await GET_STOCKS_PROFIT(query);
        if (Number(res.code) === 0) {
          this.getDataTemp = res.data;
          this.dealAllData();
        }
      } catch (error) {
        _t.errorReport({name:`Details.vue组件中方法getDealProfitData错误。${error.name}`,message:`接口url：${_Global.api.stockProfit}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 股票池
    async getStockList(query) {
      if (!window.getAppVersion()) return;
      try {
        const res = await SELECT_STOCKS(query);
        if (Number(res.code) === 0 && res.data) {
          // 得到股票池数据之后，根据stockCode gpcId stockId 来查询对应的跟踪信息
          const stockList = res.data;
          let query = {};
          const tempArr = [];
          stockList.forEach((item, index) => {
            query.stockCode = item.stock_code;
            query.gpcId =
              getParam('product') === 'jtzz'
                ? config.AccompanyService[item.gpc_id]
                : config.AccompanyServiceSecond[item.gpc_id];
            query.stockId = item.id;
            // 因循环处理多个返回值，先用promise存起来
            tempArr.push(
              new Promise(resolve => {
                return resolve(this.getStockTrace(query, item));
              })
            );
          });
          // 再将所有的值取出来
          Promise.all(tempArr).then(res => {
            this.stockList = this.dealCPData(res, 2);
            if (this.stockList) {
              // 默认买入价格排序 反转
              this.stockList.sort(compare('buyDateSort')).reverse();
            }
            this.$pageStatus.close();
          }).catch(err=>{
            _t.errorReport({name:`Details.vue中的getStockList方法中promise.all错误。${err.name}`,message:`接口url：${_Global.api.pickStocks}，参数：${JSON.stringify(query)}。${err.message}`,stack:err.stack,category:'js'});
          });
        }
      } catch (error) {
        _t.errorReport({name:`Details.vue中的getStockList方法错误。${error.name}`,message:`接口url：${_Global.api.pickStocks}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 获取备选池列表
    async getSocksData() {
      if (!window.getAppVersion()) return;
      const query = {};
      query.status = '2,3,8'; //1：备选 2：买入 3：持仓 4：卖出 5：止盈 6：止损 7：买入失败 8：待买入
      query.gpcId = config.StocksAlternative[this.query.gpcId];
      try {
        const res = await SELECT_STOCKS(query);
        if (Number(res.code) === 0) {
          if (!res.data.length) {
            return;
          }
          this.detailTableData = this.dealCPData(res.data, 1);
          // 默认买入价格排序 反转
          this.detailTableData.sort(compare('buyDateSort')).reverse();
          return;
        }
      } catch (error) {
        _t.errorReport({name:`Details.vue中的getSocksData方法错误。${error.name}`,message:`接口url：${_Global.api.pickStocks}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
      this.$pageStatus.fail(() => {
        this.getDates();
        this.getAllStocks();
        this.$toast('刷新成功');
        this.getDealProfitData();
        this.getSocksData();
      });
    },
    //处理收益、页面基本数据
    dealAllData() {
      if (this.getDataTemp.length === 0) return;
      this.defaultProfit = this.getDataTemp.default_profit; //本组合相关数据
      this.szzsProfit = this.getDataTemp.szzs_profit; //上证指数数据
      this.staticData = [];
      this.staticData = dealStaticData(this.getDataTemp, this.$route.query.gpc_id);
      this.dealProfitData();
      this.dealPieData();
    },
    // 处理收益率数据
    dealProfitData() {
      this.defaultProfit.forEach(item => {
        const tempObj = {
          date: Object.keys(item)[0].split('-').join(''),
          self: Object.values(item)[0],
          szzs: '',
        };
        this.optionData.push(tempObj);
      });
      this.szzsProfit.forEach((item, key) => {
        this.optionData[key]['szzs'] = Object.values(item)[0];
      });
      this.tempArr = [];
      // 数组暂存要切换的数据
      this.tempArr = this.optionData;
      this.threeMonthArr = spliceData(3, this.tempArr);
      this.yearArr = spliceData(12, this.tempArr);
      this.optionData = this.threeMonthArr;
    },
    // 处理饼图数据
    dealPieData() {
      let tampPieData = [];
      tampPieData = this.getDataTemp.layout; //行业布局数据
      //处理饼图数据  得到key
      const pieOptionName = Object.keys(tampPieData);
      //得到value
      const pieOptionValue = Object.values(tampPieData);
      const tempPieDataArr = [];
      pieOptionValue.forEach((item, index) => {
        tempPieDataArr.push({
          name: pieOptionName[index],
          value: item,
        });
      });
      // 取排好序的前6个
      let thirdData;
      let tempData = [];
      if (tempPieDataArr.length > 6) {
        thirdData = tempPieDataArr.sort(compare('value')).reverse().splice(0, 6);
        // 后面的做统计
        let allValue = 0;
        if (thirdData.length === 6 && tempPieDataArr.length) {
          tempPieDataArr.forEach((item, index) => {
            allValue += item.value;
          });
          if (allValue !== 0) {
            // 归类为其他
            thirdData.push({
              name: '其他行业',
              value: allValue,
            });
          }
        }
      } else if (!tempPieDataArr.length) {
        thirdData = [];
      } else {
        thirdData = tempPieDataArr.sort(compare('value')).reverse();
      }
      if (thirdData.length > 0) {
        // 获取饼图右侧名字列表 并组装饼图最终数据
        const allName = [];
        thirdData.forEach((item, index) => {
          allName.push(`${item.name}`);
          this.pieOptionData.push({
            name: item.name,
            value: item.value.toFixed(4),
            color: this.pieOptionDataColor[index],
          });
        });
        configDataOptions.drawPie(allName, this.pieOptionData);
      } else {
        this.pieOptionData = [];
      }
    },
    // 接口数据标准化处理，根据type获取stockId和marketId
    dealCPData(arr, type) {
      let detailStockList = [];
      if (!window.getAppVersion()) return;
      if (arr.length === 0) return;
      // 股池列表置空
      if (type === 2) {
        this.lastStockList2 = [];
      }
      arr.forEach(item => {
        this.stockIdArr.push(item.stock_code);
        this.marketIdArr.push(item.market);
        if (type === 2) {
          this.lastStockList2.push(apiDataDeal(item, this.globalPushType, null, 2));
        } else {
          this.lastStockList1.push(apiDataDeal(item, this.globalPushType, true, 1));
        }
        detailStockList.push(apiDataDeal(item, this.globalPushType, true));
      });
      this.detailStockListTemp = [];
      // 备选池
      if (this.lastStockList1.length) {
        this.detailStockListTemp = this.lastStockList1;
      }
      //股池
      if (this.lastStockList2.length) {
        this.detailStockListTemp = this.detailStockListTemp.concat(this.lastStockList2);
      }
      // 客户端协议获取实时行情数据
      webHQCommon(this.stockIdArr, this.marketIdArr, this.detailStockListTemp, list => {
        this.detailStockListTemp = list;
      });
      return detailStockList;
    },
    //子组件传来的值
    isShowChange(arr) {
      this.isShow = arr.showStatus;
      this.btnGray = arr.setGray;
    },
    // 获取空态文案
    async getEmptyText() {
      try {
        const result = await GET_EMPTY_TEXT();
        if(result && result.configurations && result.configurations.pcweb_charge_gpc_common_nodata) {
          this.emptyText = result.configurations.pcweb_charge_gpc_common_nodata;
        } else {
          this.emptyText = '暂无数据';
        }
      } catch (error) {
        this.emptyText = '暂无数据';
        _t.errorReport({name:`Details.vue组件中方法getEmptyText错误。${error.name}`,message:`接口url：${_Global.api.frontEmptyConfig}。${error.message}`,stack:error.stack,category:'js'});
      }
    }
  },
};
</script>
<style lang="less" scoped>
.detail_wapper {
  width: 7.4rem;
  height: auto;
  margin: 0 auto;
}
.calendar_prop {
  position: absolute;
  right: 0.2rem;
  top: -0.3rem;
}
.fade-in {
  opacity: 1;
  max-height: 8.8rem;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.fade-out {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.chart_line {
  width: 7rem;
  height: 4rem;
}
.cp_desc {
  height: auto;
  background-color: #ffffff;
  padding-bottom: 5%;
  .close_and_up {
    padding: 2% 3.2%;
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 0.24rem;
    justify-content: space-between;
    text-align: center;
  }
  .close_and_up_jtzz {
    font-weight: bold;
    color: #323232;
    font-size: 0.36rem;
  }
  .close_and_up_span {
    font-weight: bold;
    color: #323232;
    font-size: 0.36rem;
  }
  .close_and_up span:nth-child(2) {
    font-size: 0.26rem;
  }
  .close_and_up span img {
    pointer-events: none;
    width: 0.32rem;
    height: 0.25rem;
    margin-bottom: 0.07rem;
  }
  .cp_desc_content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.24rem;
    color: #666666;
    letter-spacing: 0;
    text-align: justify;
    padding: 2% 3.2% 0 3.2%;
  }
  .cp_desc_content_open {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: 0.3rem;
    color: #666666;
    letter-spacing: 0;
    line-height: 0.4rem;
    text-align: justify;
    padding: 2% 3.2% 0 3.2%;
    border-top: 0.01rem solid #eeeeee;
  }
}

[theme-mode='black'] .cp_desc {
  height: auto;
  background-color: #121212;
  padding-bottom: 5%;
  .close_and_up {
    padding: 2% 3.2%;
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 0.24rem;
    justify-content: space-between;
    text-align: center;
  }
  .close_and_up_jtzz {
    font-weight: bold;
    color: #d2d2d3;
    font-size: 0.36rem;
  }
  .close_and_up_span {
    font-weight: bold;
    color: #d2d2d3;
    font-size: 0.36rem;
  }
  .close_and_up span:nth-child(2) {
    font-size: 0.26rem;
  }
  .close_and_up span img {
    pointer-events: none;
    width: 0.32rem;
    height: 0.25rem;
  }
  .cp_desc_content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.24rem;
    color: #666666;
    letter-spacing: 0;
    text-align: justify;
    padding: 2% 3.2% 0 3.2%;
  }
  .cp_desc_content_open {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: 0.3rem;
    color: #d2d2d3;
    letter-spacing: 0;
    text-align: justify;
    line-height: 0.4rem;
    padding: 2% 3.2% 0 3.2%;
    border-top: 0.01rem solid #222222;
  }
}
.income_analyse_wrapper {
  width: 96%;
  margin: 0 auto;
  background-color: #fff;
  .income_analyse_curve {
    width: 100%;
    height: 3.84rem;
    margin-top: 0.28rem;
  }
}
[theme-mode='black'] .income_analyse_wrapper {
  width: 96%;
  margin: 0 auto;
  background-color: #121212;
  .income_analyse_curve {
    width: 100%;
    height: 3.84rem;
  }
}
.income_analyse_curve_change_tab_wrapper {
  margin-top: 0.45rem;
}
.income_analyse_curve_change_tab {
  width: 6.8rem;
  height: 0.7rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 0.26rem;
  color: #666666;
  line-height: 0.7rem;
  div {
    height: 0.7rem;
    width: 2.7rem;
  }
  .isSelect {
    border-radius: 4px;
    color: #ffffff;
    background-color: #e93030;
    height: 0.7rem;
    width: 2.7rem;
  }
}
[theme-mode='black'] .income_analyse_curve_change_tab {
  width: 6.8rem;
  height: 0.7rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  border-radius: 4px;
  font-size: 0.26rem;
  color: #323232;
  border: 1px solid #323232;
  line-height: 0.7rem;
  div {
    height: 0.7rem;
    width: 2.7rem;
  }
  .isSelect {
    border-radius: 4px;
    background-color: #fd4332;
    color: #d2d2d3;
    height: 0.7rem;
    width: 2.7rem;
  }
}
.cp_chi_cang {
  width: 100%;
  margin-top: 0.2rem;
  background-color: #ffffff;
  padding-bottom: 0.2rem;
  position: relative;
  .tp_chi_cang_history {
    padding: 2% 3.2%;
    padding-top: 0.1rem;
    color: #323232;
    font-size: 0.36rem;
    div:nth-child(1) {
      font-weight: bold;
      width: 50%;
      text-align: left;
      margin-right: 5%;
    }
  }
  /deep/ .insustry_layout_wrapper_no_data {
    width: 93.6%;
    background-color: transparent;
  }
}
.to_history {
  padding: 2%;
  div:nth-child(1) {
    font-size: 0.28rem;
    color: #666666;
    width: 100%;
    text-align: center;
  }
  div img {
    pointer-events: none;
    width: 0.32rem;
    height: 0.3rem;
    margin-bottom: 0.02rem;
  }
}
.table_wrapper {
  padding: 0.2rem 0.26rem;
  margin-top: 0.2rem;
  background-color: #ffffff;
}
[theme-mode='black'] .table_wrapper {
  padding: 0.2rem 0.26rem;
  margin-top: 0.2rem;
  background-color: #121212;
}
.table_scroll_wrapper {
  height: 5.6rem;
  overflow-x: hidden;
  overflow-y: scroll;
}
.table_scroll_wrapper_auto {
  height: auto;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
[theme-mode='black'] .cp_chi_cang {
  width: 100%;
  background-color: #121212;
  position: relative;
  .tp_chi_cang_history {
    padding: 2% 3.2%;
    text-align: center;
    padding-top: 0.1rem;
    color: #d2d2d3;
    font-size: 0.36rem;
    border-bottom: 0.01rem solid #1a1a1a;
    box-shadow: inset 0 0 0 0 #1a1a1a;
    div:nth-child(1) {
      font-weight: bold;
      width: 50%;
      text-align: left;
      margin-right: 5%;
    }
    div:nth-child(2) {
      color: #8e8e8e;
      font-size: 0.26rem;
      width: 24%;
      text-align: center;
    }
    div img {
      pointer-events: none;
      width: 0.32rem;
      height: 0.3rem;
    }
  }
}
/* D3Chart的toolTip 放到calendar组件下面 */
.chart_line /deep/ .d3charts-tooltip {
  z-index: 1999 !important;
}
</style>
